<template>
  <view class="container">
    <view class="login-form">
      <view class="form-header">
        <text class="form-title">欢迎回来</text>
        <text class="form-subtitle">登录您的音乐账户</text>
      </view>

      <view class="form-content">
        <view class="input-group">
          <input 
            class="form-input" 
            placeholder="请输入用户名" 
            v-model="loginForm.username"
            maxlength="50"
          />
        </view>

        <view class="input-group">
          <input 
            class="form-input" 
            placeholder="请输入密码" 
            v-model="loginForm.password"
            password
            maxlength="50"
          />
        </view>

        <button 
          class="login-button" 
          :class="{ 'loading': isLoading }"
          @click="handleLogin"
          :disabled="isLoading"
        >
          {{ isLoading ? '登录中...' : '登录' }}
        </button>

        <view class="form-footer">
          <text class="register-link" @click="goToRegister">还没有账户？立即注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 内联API配置以避免模块导入问题
const BASE_URL = 'http://localhost:3000/api'

function request(options) {
  return new Promise((resolve, reject) => {
    const token = uni.getStorageSync('token')
    if (token) {
      options.header = {
        ...options.header,
        'Authorization': `Bearer ${token}`
      }
    }

    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        ...options.header
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

const api = {
  user: {
    login(data) {
      return request({
        url: '/users/login',
        method: 'POST',
        data
      })
    }
  }
}

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      isLoading: false
    }
  },

  methods: {
    // 处理登录
    async handleLogin() {
      if (!this.loginForm.username.trim()) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }

      if (!this.loginForm.password.trim()) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }

      this.isLoading = true

      try {
        const response = await api.user.login(this.loginForm)
        
        if (response.code === 200) {
          // 保存token和用户信息
          uni.setStorageSync('token', response.data.token)
          uni.setStorageSync('userInfo', response.data.user)
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })

          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/profile/profile'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: response.message || '登录失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({
          title: '登录失败，请检查网络连接',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },

    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-form {
  width: 100%;
  max-width: 600rpx;
  background-color: white;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.form-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.form-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.form-subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.form-content {
  margin-bottom: 40rpx;
}

.input-group {
  margin-bottom: 40rpx;
}

.form-input {
  width: 100%;
  height: 100rpx;
  background-color: #f8f8f8;
  border-radius: 50rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #ff6b6b;
  background-color: white;
}

.login-button {
  width: 100%;
  height: 100rpx;
  background-color: #ff6b6b;
  color: white;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  margin-bottom: 40rpx;
  transition: all 0.3s ease;
}

.login-button:active {
  background-color: #ff5252;
}

.login-button.loading {
  background-color: #ccc;
}

.form-footer {
  text-align: center;
}

.register-link {
  font-size: 26rpx;
  color: #ff6b6b;
  text-decoration: underline;
}
</style>
